<template>
  <div class="main_container">
    <div class="left">
      <!-- 日常应用 -->
      <div class="daily" ref="daily">
        <div class="sun-title flex_">
          <div>日常应用</div>
          <!-- <div class="flex_more">更多 ></div> -->
        </div>

        <ul class="list">
          <li @click="toProcess">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/daily01.png')" fit="contain">
            </el-image>
            <div class="notice-number" v-if="todolength > 0" v-text="todolength"></div>
            <span>OA审批</span>
          </li>

          <li @click="toNewsManager" v-show="false">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/daily02.png')" fit="contain"></el-image>
            <span>新闻</span>
          </li>
          <li @click="toNoticeManager" class="notice">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/daily03.png')" fit="contain"></el-image>
            <span v-if="noticeLength > 0" class="message_tip">{{
                noticeLength
            }}</span>
            <span>公告</span>
          </li>
          <li @click="toProcess" v-show="false">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/daily04.png')" fit="contain"></el-image>
            <span>更多</span>
          </li>
        </ul>
      </div>
      <!-- 审批流程 -->
      <div class="approval" ref="approval">
        <div class="sun-title flex_">
          <div>审批流程</div>
          <div class="flex_more" @click="toMore">更多 ></div>
        </div>
        <ul class="list">
          <!-- 请假 -->
          <li @click="toVocation(1)">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/approval01.png')" fit="contain">
            </el-image>
            <span>请假</span>
          </li>
          <!-- 加班 -->
          <li @click="toVocation(2)">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/approval02.png')" fit="contain">
            </el-image>
            <span>加班</span>
          </li>
          <!-- 出差 -->
          <li @click="toVocation(3)">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/approval03.png')" fit="contain">
            </el-image>
            <span>出差</span>
          </li>
          <!-- 外出 -->
          <li @click="toVocation(4)">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/approval04.png')" fit="contain">
            </el-image>
            <span>外出</span>
          </li>
          <!-- 补卡 -->
          <li @click="toVocation(5)">
            <el-image :style="img_style" :src="require('../../assets/imgs/wgsbuka.png')" fit="contain">
            </el-image>
            <span>补卡</span>
          </li>
          <!-- 日常报销 -->
          <li @click="toVocation(6)">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/approval06.png')" fit="contain">
            </el-image>
            <span>日常报销</span>
          </li>
          <!-- <li @click="toVocation">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/approval07.png')" fit="contain">
            </el-image>
            <span>设备领用</span>
          </li>
          <li @click="toVocation">
            <el-image :style="img_style" :src="require('../../assets/imgs/wel/daily04.png')" fit="contain"></el-image>
            <span>更多</span>
          </li> -->
        </ul>
      </div>
      <!-- 待办事件 公司文件 -->
      <div class="left_footer">
        <!-- 待办事项 -->
        <div class="agency">
          <div class="sun-title flex__">
            待办事项（{{ todolength }}）
            <span @click="toProcess" class="more">更多 ></span>
          </div>
          <ul class="list" ref="agencyList" v-if="todoData.length > 0">
            <li v-for="(item, index) in todoData" :key="index">
              <h5>
                <el-image style="width: 12px; height: 12px" :src="require('../../assets/imgs/wel/agency01.png')"
                  fit="contain"></el-image>
                <div class="agency-text">{{ item.startUser }}提交的{{ item.schemeName }}</div>
              </h5>
              <div class="date">
                <el-image style="width: 12px; height: 12px" :src="require('../../assets/imgs/wel/agency02.png')"
                  fit="contain"></el-image>{{ item.createTime }}
              </div>
              <div class="user">
                <el-image style="width: 12px; height: 12px" :src="require('../../assets/imgs/wel/agency03.png')"
                  fit="contain"></el-image>{{ item.startUser }}
              </div>
              <div class="agency-footer" @click="toProcessDetail(item)">立即处理</div>
            </li>
          </ul>
          <div class="list" v-else>暂无代办项</div>
        </div>
        <!-- 公司文件 -->
        <div class="file_tab">
          <el-tabs v-model="fileActive" @tab-click="fileClick">
            <el-tab-pane label="公司文件" name="company">
              <el-table :data="companyData" style="width: 100%">
                <el-table-column width="50">
                    <template slot-scope="scope">
                      <div v-if="scope.row.F_Type == '文件夹'">
                        <!-- 没有密码的文件夹 -->
                        <img v-if="scope.row.F_IsPassword == 0" class="card" src="../../assets/folders/folder/folder.png">
                        <!-- 有密码的文件夹 -->
                        <img v-if="scope.row.F_IsPassword == 1" class="card" src="../../assets/folders/folder/folder-lock.png">
                      </div>
                      <div v-else>
                        <!-- 图片 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && pictureData.includes(scope.row.F_Type)" class="card" :src="scope.row.F_FilePath">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && pictureData.includes(scope.row.F_Type)" class="card" :src="scope.row.F_FilePath">
                        <!-- pdf文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && scope.row.F_Type == 'pdf'" class="card" src="../../assets/folders/PDF/pdf.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && scope.row.F_Type == 'pdf'" class="card" src="../../assets/folders/PDF/pdf-lock.png">
                        <!-- word文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && wordData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/word/word.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && wordData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/word/word-lock.png">
                        <!-- PPT文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && pptData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/PPT/ppt.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && pptData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/PPT/ppt-lock.png">
                        <!-- excel文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && excelData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/excel/excel.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && excelData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/excel/excel-lock.png">
                        <!-- TXT文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && scope.row.F_Type=='txt'" class="card" src="../../assets/folders/TXT/txt.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && scope.row.F_Type=='txt'" class="card" src="../../assets/folders/TXT/txt-lock.png">
                        
                        <!-- 加密 -->
                        <img v-if="scope.row.F_IsSecruity == 1" class="card" src="../../assets/folders/encryption.png">

                      </div>
                    </template>
                </el-table-column>
                <el-table-column prop="F_Name" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="F_CreateDate" label="创建时间" width="180">
                </el-table-column>
                <el-table-column prop="F_CreateUserName" label="创建者">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="部门文件" name="department">
              <el-table :data="departmentData" style="width: 100%">
                <el-table-column width="50">
                  <template slot-scope="scope">
                      <div v-if="scope.row.F_Type == '文件夹'">
                        <!-- 没有密码的文件夹 -->
                        <img v-if="scope.row.F_IsPassword == 0" class="card" src="../../assets/folders/folder/folder.png">
                        <!-- 有密码的文件夹 -->
                        <img v-if="scope.row.F_IsPassword == 1" class="card" src="../../assets/folders/folder/folder-lock.png">
                      </div>
                      <div v-else>
                        <!-- 图片 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && pictureData.includes(scope.row.F_Type)" class="card" :src="scope.row.F_FilePath">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && pictureData.includes(scope.row.F_Type)" class="card" :src="scope.row.F_FilePath">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && pictureData.includes(scope.row.F_Type)" class="card-lock" src="../../../src/assets/folder/lock.png">
                        <!-- pdf文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && scope.row.F_Type == 'pdf'" class="card" src="../../assets/folders/PDF/pdf.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && scope.row.F_Type == 'pdf'" class="card" src="../../assets/folders/PDF/pdf-lock.png">
                        <!-- word文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && wordData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/word/word.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && wordData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/word/word-lock.png">
                        <!-- PPT文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && pptData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/PPT/ppt.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && pptData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/PPT/ppt-lock.png">
                        <!-- excel文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && excelData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/excel/excel.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && excelData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/excel/excel-lock.png">
                        <!-- TXT文件 -->
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && scope.row.F_Type=='txt'" class="card" src="../../assets/folders/TXT/txt.png">
                        <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && scope.row.F_Type=='txt'" class="card" src="../../assets/folders/TXT/txt-lock.png">
                        <!-- 加密 -->
                        <img v-if="scope.row.F_IsSecruity == 1" class="card" src="../../assets/folders/encryption.png">
                        
                      </div>
                    </template>
                </el-table-column>
                <el-table-column prop="F_Name" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="F_CreateDate" label="创建时间" width="180">
                </el-table-column>
                <el-table-column  prop="F_CreateUserName" label="创建者"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="个人文件" name="person">
              <el-table :data="personalData" style="width: 100%">
                <el-table-column width="50">
                  <template slot-scope="scope">
                    <div v-if="scope.row.F_Type == '文件夹'">
                      <!-- 没有密码的文件夹 -->
                      <img v-if="scope.row.F_IsPassword == 0" class="card" src="../../assets/folders/folder/folder.png">
                      <!-- 有密码的文件夹 -->
                      <img v-if="scope.row.F_IsPassword == 1" class="card" src="../../assets/folders/folder/folder-lock.png">
                    </div>
                    <div v-else>
                      <!-- 图片 -->
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && pictureData.includes(scope.row.F_Type)" class="card" :src="scope.row.F_FilePath">
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && pictureData.includes(scope.row.F_Type)" class="card" :src="scope.row.F_FilePath">
                      <!-- pdf文件 -->
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && scope.row.F_Type == 'pdf'" class="card" src="../../assets/folders/PDF/pdf.png">
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && scope.row.F_Type == 'pdf'" class="card" src="../../assets/folders/PDF/pdf-lock.png">
                      <!-- word文件 -->
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && wordData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/word/word.png">
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && wordData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/word/word-lock.png">
                      <!-- PPT文件 -->
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && pptData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/PPT/ppt.png">
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && pptData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/PPT/ppt-lock.png">
                      <!-- excel文件 -->
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && excelData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/excel/excel.png">
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && excelData.includes(scope.row.F_Type)" class="card" src="../../assets/folders/excel/excel-lock.png">
                      <!-- TXT文件 -->
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 0 && scope.row.F_Type=='txt'" class="card" src="../../assets/folders/TXT/txt.png">
                      <img v-if="scope.row.F_IsSecruity == 0 && scope.row.F_IsPassword == 1 && scope.row.F_Type=='txt'" class="card" src="../../assets/folders/TXT/txt-lock.png">
                      <!-- 加密 -->
                      <img v-if="scope.row.F_IsSecruity == 1" class="card" src="../../assets/folders/encryption.png">
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="F_Name" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="F_CreateDate" label="创建时间" width="180">
                </el-table-column>
                <el-table-column prop="F_CreateUserName" label="创建者"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
          <span class="file_more" @click="toCloudDisk">更多 ></span>
        </div>
      </div>
    </div>
    <div class="right">
      <!-- 日历 -->
      <div class="calendar-container box-shadow">
        <div class="header">日历</div>
        <div class="main">
          <el-calendar v-model="calendarVal">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div class="calendar-item-box" :class="data.isSelected ? 'is-sign' : ''">
                {{ data.day.split("-").slice(2).join("-") }}
              </div>
            </template>
          </el-calendar>
        </div>
        <div class="calendar-btn">
          <el-image style="width: 20px; height: 20px" :src="require('../../assets/imgs/wel/calendar01.png')"
            fit="contain"></el-image>
          暂无日程
        </div>
      </div>
      <!-- 公告 -->
      <div class="news">
        <div class="sun-title">公告<span @click="toNoticeManager" class="more">更多 ></span></div>
        <ul class="list" v-if="newsList.length > 0 || newsNoTop.length > 0">
          <template v-if="newsList.length > 0">
            <li class="ul_li" v-for="(item, index) in newsList" @click="viewRow(item)" :key="index">
              <el-image v-if="item.is_top == 1" style="width: 10px; height: 13px"
                :src="require('../../assets/imgs/wel/new01.png')" fit="contain">
              </el-image>
              {{ item.title }}
            </li>
          </template>
          <template v-if="newsNoTop.length > 0">
            <li class="ul_li" v-for="(item, index) in newsNoTop" @click="viewRow(item)" :key="index">
              <span class="one" v-show="index == 0">1</span>
              <span class="two" v-show="index == 1">2</span>
              <span class="three" v-show="index == 2">3</span>
              <span class="dark" v-show="index == 3">4</span>
              <span class="dark" v-show="index == 4">5</span>
              <span class="dark" v-show="index == 5">6</span>
              <span class="dark" v-show="index == 6">7</span>
              <span class="dark" v-show="index == 7">8</span>
              <span class="dark" v-show="index == 8">9</span>
              <span class="dark" v-show="index == 9">10</span>
              {{ item.title }}
            </li>
          </template>
        </ul>
        <div v-else class="list">暂无数据</div>
        <!-- <el-image class="new-icon-footer" :style="news_icon"
          :src="require('../../assets/imgs/wel/new05.png')" fit="contain"></el-image> -->
      </div>
    </div>
    <!-- 查看详情 -->
    <el-dialog v-dialogDrag title="查看详情" class="news-dialog" :visible.sync="newsVisible" width="80%">
      <div class="header" v-if="newDetail.author">
        <el-image style="width: 150px; height: 40px" :src="require('../../../public/img/logo-blank.png')" fit="contain">
        </el-image>
        <div class="msg">
          <el-tag type="info" size="mini">{{ newDetail.notification_type | notificationTypeFilter }}</el-tag>
          <span>{{ newDetail.publish_time }}</span>
          <span>{{ newDetail.author }}</span>
        </div>
        <div class="new-content">
          <div class="title">{{ newDetail.title }}</div>
          <!-- <el-image v-if="newDetail.cover_picture_info" style="width: 450px"
                        :src="newDetail.cover_picture_info.filePath" fit="contain">
                    </el-image> -->
          <div v-html="newDetail.content"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getUpcomingTasks } from "@/api/workFlow/WFProcess";
import { getMobileSlide } from "@/api/officeautomation/notice";
import { getNoticeDetail } from '@/api/officeautomation/notice';
import {getAllFileList}from '@/api/user.js';

export default {
  name: "App",
  data() {
    return {
      todoData: [], //待办数据
      noticeData: [], //公告数据
      searchParam: {
        limit: 1,
        size: 20,
        keyword: null,
        order: null,
        orderfield: null,
      }, //参数
      todolength: 0, //待办长度
      noticeLength: 0, //公告长度
      newsVisible: false,
      newDetail: {},
      pictureData:['png','jpg','jpeg','gif','psd','tif','bmp'],
      wordData:['doc','docx'],
      pptData:['pptx','ppt'],
      excelData:['xlsx','xls'],
      img_style: {
        width: "90px",
        height: "90px",
      },
      news_icon: {
        width: "104px",
        height: "104px",
      },
      screenWidth: 0, // 屏幕分辨率
      fileActive: "company", // 公司文件选项卡
      newsList: [], // 新闻数据
      newsNoTop: [],
      companyData:[],//公司云盘
      departmentData:[],//部门云盘
      personalData:[],//个人云盘
      userInfo:this.$store.state.user.userInfo,
      departmentItems:{},
      intervalId:0
    };
  },
  created(){
     this.dataRefreh();
  },
  async mounted() {
    //获取公告数据
    await this.getNoticeData();
    //获取待办
    await this.getUpcomingTasks();
    //查询云盘数据
    await this.getCloudDisk()
    //获取用户信息
    await this.getUserInfo()
    // 监听屏幕分辨率
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    screenWidth(val) {
      if (val >= 1920) {
        // let domHeight = document.body.clientHeight
        // this.$nextTick(() => {
        //   this.$refs.agencyList.style.height = domHeight - 144 - this.$refs.daily.offsetHeight - this.$refs.approval.offsetHeight + 'px'
        // })
      } else if (val <= 1440) {
        // 屏幕分辨率为 MAC 本以下操作
        this.img_style.width = "60px";
        this.img_style.height = "60px";
        this.news_icon.width = "50px";
        this.news_icon.height = "50px";
      }
    },
  },
  filters: {
    notificationTypeFilter(val) {
      if (val == 10) {
        return '会议通知'
      } else if (val == 20) {
        return '活动公告'
      } else if (val == 30) {
        return '社会公告'
      } else if (val == 40) {
        return '内部公告'
      } else if (val == 50) {
        return '其他公告'
      }
    },
  },
  methods: {
    toCloudDisk(){
      console.log(this.fileActive);
      if(this.fileActive == 'company'){
        this.$router.push({
          path: "/cloud_disk/companyfile",
        });
      }else if (this.fileActive == 'department'){
        this.$router.push({
          path: "/cloud_disk/departmentFile",
        });
      }else if(this.fileActive == 'person'){
        this.$router.push({
          path: "/cloud_disk/personalFile",
        });
      }
    },
    dataRefreh(){
      this.intervalId = setInterval(() => {
          console.log("刷新" + new Date());
          this.getHeaderData(); //加载数据函数
      }, 300000);
    },
    getHeaderData(){
        //请求接口
        this.getUpcomingTasks()
        this.getNoticeData()
    },
    //停止定时器
    clear() {
      clearInterval(this.intervalId) //清除计时器
      this.intervalId = null;//设置为null
    },
    getUserInfo(){
      if(this.userInfo && this.userInfo.F_Department && this.userInfo.F_Department.length > 0){
        this.departmentItems  = this.userInfo.F_Department[0]
      }
    },
    getPersonalData(){
      let params = {
        folderId:"",
        keyWord:"",
        level:0,
      }
      getAllFileList(params).then(res =>{
        if(res.data.success){
          this.personalData = [...res.data.data.folders,...res.data.data.files]
        }
      })
    },
     getDepartmentData(){
      let params = {
        departmentId:this.departmentItems.F_DepartmentId,
        folderId:"",
        keyWord:"",
        level:1,
      }
      getAllFileList(params).then(res =>{
        if(res.data.success){
          this.departmentData = [...res.data.data.folders,...res.data.data.files]
        }
      })
    },
    //获取公司文件
    getCloudDisk(){
      let params = {
        folderId:"",
        keyWord:"",
        level:2,
      }
      getAllFileList(params).then(res =>{
        if(res.data.success){
          this.companyData = [...res.data.data.folders,...res.data.data.files]
        }
      })
    },
    //流程发起
    toVocation(id) {
      this.$router.push({
        path: "/workflow/launch",
        query: { id: id },
      });
    },
    toMore() {
      this.$router.push({
        path: "/workflow/launch",
      });
    },
    //新闻管理
    toNewsManager() {
      this.$router.push({
        path: "/office-automation/news",
      });
    },
    //通知公告
    toNoticeManager() {
      this.$router.push({
        path: "/office-automation/notice",
      });
    },
    //去待办
    toProcess() {
      this.$router.push({
        path: "/workflow/process",
      });
    },
    // 立即处理精准跳转
    toProcessDetail(item){
      localStorage.setItem('toProcess', JSON.stringify(item))
      this.$router.push({
        path: '/workflow/process',
      })
    },
    //去考勤
    toAttendance() {
      this.$router.push({
        path: "/attendanceManagement/index",
      });
    },
    /* 获取公告数据 */
    getNoticeData() {
      getMobileSlide().then((res) => {
        if (res.data.success) {
          let resData = res.data.data;
          this.newsList = []
          this.newsNoTop = []
          if (resData.length > 0) {
            resData.forEach((ele) => {
              if (ele.is_top == 1) {
                this.newsList.push(ele)
              } else {
                this.newsNoTop.push(ele);
              }
            });
          }
        }
      });
    },
    // 待办
    getUpcomingTasks() {
      let params = {
        limit: 1,
        size: 200,
        order: "desc",
        orderfield: "",
        keyword: "", // 关键字
        nwfRelationId: "",
        startTime: "", // 起始时间
        endTime: "", // 结束时间
        serialNumber: "", // 流水号
        SchemeType: "", // 模板类型
      };
      getUpcomingTasks(params).then((res) => {
        if (res && res.data && res.data.data) {
          this.todolength = res.data.data.Total;
          if (res.data.data.Rows) {
            let arr = res.data.data.Rows;
            if (arr.length > 4) {
              this.todoData = arr.slice(0, 4);
            } else {
              this.todoData = arr
            }
          }
        }
      });
    },
    toMeetManager() {
      this.$router.push({
        path: "/office-automation/schedule",
      });
    },
    // 公司文件，部门文件，个人文件
    fileClick(tab) {
      this.fileActive = tab.name;
      // department\person\company
      if(this.fileActive == 'company'){
        this.getCloudDisk()
      }else if(this.fileActive == 'department'){
        this.getDepartmentData()
      }else if(this.fileActive == 'person'){
        this.getPersonalData()
      }

    },
    // 查看详情
    viewRow(row) {
      getNoticeDetail(row.F_Id).then(res => {
        if (res.data.code == 0) {
          let resData = res.data.data

          if (resData.notification_source == '20') {
            window.open(resData.redirect_url, '_blank')
          } else {
            this.newsVisible = true;
            this.newDetail = resData
          }
        }
      })
    },
    
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  }
};
</script>
<style lang="scss" scoped>
.card{
  width: 28px;
  height: 28px;
}
ul,
li,
h5 {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main_container {
  padding: 0 15px;
  display: flex;

  .left {
    flex: 1;
    margin-right: 17px;
  }

  .right {
    width: 400px;
    display: flex;
    flex-direction: column;
  }
}

.daily,
.approval {
  display: flex;
  flex-direction: column;
  padding: 20px 0 0 50px;
  background-color: #fff;
  border-radius: 12px;

  .sun-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
  }

  .list {
    display: flex;
    align-items: center;

    li {
      position: relative;
      margin-right: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-bottom: 10px;
      cursor: pointer;

      .el-image {
        margin-bottom: 10px;
      }

      span {
        font-size: 14px;
      }
    }

    .notice {
      .message_tip {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #f00909;
        color: #fff;
        text-align: center;
        line-height: 24px;
      }
    }
  }
}

@media screen and (max-width: 1440px) {

  .daily,
  .approval {
    padding-left: 20px;

    .sun-title {
      font-size: 16px;
    }

    .list li {
      margin-right: 80px;
    }
  }
}

.approval {
  margin-top: 15px;

  .list {
    flex-wrap: wrap;

    li {
      padding-bottom: 20px;
    }
  }
}

.left_footer {
  display: flex;
  justify-content: space-between;
}

.agency {
  width: 49%;
  margin-top: 15px;
  margin-right: 7.5px;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 12px;

  .sun-title {
    padding: 0 10px;
    margin-bottom: 13px;
    font-size: 18px;
    color: #333;
    font-weight: 600;

    .more {
      margin-left: auto;
      font-size: 16px;
      color: #999;
      font-weight: normal;
      cursor: pointer;
    }

    .more:hover {
      color: #0063f5;
    }
  }

  //大屏幕上的高度（待办事项）
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 640px);

    li {
      width: 48%;
      padding-top: 14px;
      background-color: #f0f2f8;
      margin-bottom: 10px;
      border-radius: 6px;
      overflow: hidden;

      h5 {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #222;
        margin-bottom: 12px;
        padding: 0 0 0 26px;

        .el-image {
          margin-right: 8px;
        }

        .agency-text {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .date,
      .user {
        margin-bottom: 8px;
        font-size: 12px;
        color: #999;
        padding: 0 26px;

        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        .el-image {
          margin-right: 8px;
        }
      }

      .agency-footer {
        border-top: 1px solid #e7e7e7;
        padding: 10px 0;
        text-align: center;
        font-size: 12px;
        color: rgb(1, 109, 227);
        transition: 0.3s;
        cursor: pointer;
      }

      .agency-footer:hover {
        transition: 0.3s;
        color: rgba(1, 109, 227, 0.8);
      }
    }
  }
}

.file_tab {
  position: relative;
  width: 49%;
  margin-top: 15px;
  margin-left: 7.5px;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 12px;
  overflow: scroll;

  .file_more {
    position: absolute;
    top: 28px;
    right: 32px;
    font-size: 16px;
    color: #999;
    cursor: pointer;
  }
}

@media screen and (max-width: 1440px) {

  .agency,
  .file_tab {
    padding: 20px;

    .sun-title {
      font-size: 16px;

      .more {
        font-size: 14px;
      }
    }

    .file_more {
      font-size: 14px;
    }
  }

  .agency .list {
    height: calc(100vh - 685px);

    li {
      h5 {
        padding: 0 10px;
      }

      .date,
      .user {
        padding: 0 10px;
      }
    }
  }
}

.calendar-container {
  position: relative;
  min-height: 370px;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;

  .header {
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .main {

    // 日历头部
    ::v-deep .el-calendar__header {
      border-bottom: 0;
      padding: 0 20px;

      .el-calendar__title {
        font-size: 18px;
        font-weight: bold;
      }
    }

    ::v-deep .el-calendar__body {
      padding: 12px 20px;
      border-bottom: 0;
      background-color: #ebeef5;
      width: 70%;
      margin: 20px auto 0;
      border-radius: 10px;
    }

    ::v-deep .el-calendar-table thead th {
      font-weight: 600;
      color: #515a6e;
      padding: 4px 4px 4px 0;
      font-size: 14px;
    }

    // 边框线
    ::v-deep .el-calendar-table td {
      border: 0;
      border-radius: 50%;
    }

    // 单元格宽
    ::v-deep .el-calendar-day {
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

    // 选中背景色
    ::v-deep .el-calendar-table td.is-selected {
      color: #fff;
      border-radius: 50%;
      background-color: transparent;

      .el-calendar-day {
        background-color: #009cf5;
      }
    }

    ::v-deep .el-calendar-table .el-calendar-day:hover {
      background-color: #009cf5;
      color: #fff;
      border-radius: 50%;
    }

    .calendar-item-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .is-sign {
      position: relative;
    }
  }

  .calendar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 25px;
    left: 50%;
    margin-left: -43px;
    font-size: 14px;
    color: #666;

    .el-image {
      margin-right: 10px;
    }
  }
}

.flex_ {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.flex__ {
  display: flex;
}

.flex_more {
  font-size: 16px;
  font-weight: 300;
  color: #333;
  margin-right: 40px;
}

.flex_more:hover {
  cursor: pointer;
  color: #0063f5;
}

.news {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 15px;
  margin-bottom: 10px;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;

  .sun-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    height: 24px;

    span {
      margin-left: auto;
      margin-left: auto;
      font-size: 16px;
      color: #999;
      font-weight: normal;
      cursor: pointer;
    }
  }

  .list {
    flex: 1;
    margin-top: 25px;
    overflow-y: auto;
    overflow-x: hidden;

    li {
      margin-bottom: 8px;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      &>span {
        font-size: 18px;
        margin-right: 8px;
      }

      .one {
        color: #f10400;
      }

      .two {
        color: red;
      }

      .three {
        color: orange;
      }

      .drak {
        color: #9c9a9a
      }

      .el-image {
        margin-right: 20px;
      }
    }
  }

  .new-icon-footer {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

@media screen and (max-width: 1440px) {
  .calendar-container {
    min-height: 455px;
  }

  .news {
    .sun-title {
      font-size: 16px;
    }
  }
}

.ul_li:hover {
  cursor: pointer;
  color: #0063f5;
}

.news-dialog {
  ::v-deep .el-dialog__body {
    height: 600px;
    overflow-y: auto;
  }

  .header {
    .msg {
      span:first-child {
        margin-right: 10px;
        padding-right: 5px;
      }

      span {
        padding-right: 10px;
      }
    }
  }
}

.notice-number {
  width: 28px;
  height: 28px;
  border: 1px solid red;
  position: absolute;
  right: -14px;
  border-radius: 50%;
  background: red;
  font-weight: bold;
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  top: -8px;
  z-index: 100;
  text-align: center;
}
</style>
